<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人账户中心</title>
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
    <link rel="stylesheet" href="../../assets/css/jquery-ui.min.css"/>
    <link rel="stylesheet" href="../../assets/css/login/member.css">
    <link rel="stylesheet" href="../../assets/css/manager.css">
</head>
<body>
<div class="head">
    <div class="header">
        <div class="header-cnt fn-clear">
            <h1 class="logo">
                <a href="" class="logo-img logo-img-jx" title="激想云商零售管理">
                    激想云商零售管理
                </a>
            </h1>
            <h2 class="logo-title">
                填写发票
            </h2>
        </div>
    </div>
</div>
<div class="container">
    <div class="content">
        <div class="maincenter payment-warp">

            <header class="order-header">
                <div class="order-info">
                    <h2>填写发票</h2>
                    <p></p>
                    <p class="grey">请仔细核实提交的发票信息，发票一旦寄出不接受退换</p>
                </div>
                <div class="head-right">
                    <div class="order-stage">
                        <span class="label label-lg label-light arrowed-right">确认订单</span>
                        <span class="label label-lg label-grey arrowed-right arrowed-in">填写发票</span>
                        <span class="label label-lg label-light arrowed-right arrowed-in">付款</span>
                        <span class="label label-lg label-light  arrowed-in">付款成功</span>
                    </div>
                    <div class="text-right mt-10">
                        订单编号：37817314144
                    </div>
                </div>
            </header>
            <div>
                <form class="form-horizontal ui-form" id="invoiceForm" novalidate="novalidate">
                    <div class="ui-form-item">
                        <label class="ui-label">选择发票类型</label>
                        <input class="ui-radio" id="#normal" type="radio" name="invoice-type" value="normal"
                               checked="checked"
                               seed="JCompleteForm-male" smartracker="on">
                        <label for="#normal">普通发票</label>
                        <input class="ui-radio" id="#specialty" type="radio" name="invoice-type" value="specialty"
                               seed="JCompleteForm-female" smartracker="on">
                        <label for="#specialty">专用发票</label>
                    </div>
                    <fieldset id="normal">
                        <div class="ui-form-item">
                            <label class="ui-label">企业名称</label><span>上海激想体育文化股份有限公司</span>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">发票金额</label> <span>¥ 2400</span>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label"> 收货人姓名</label>
                            <input name="username" class="ui-input" type="text" placeholder="请填写收货人姓名" value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">收货地址</label>
                            <textarea placeholder="请填写收货地址" name="address" cols="50" rows="4"></textarea>
                            <div class="ui-form-explain-not-input"><i class="fa fa-times-circle ui-form-icon"
                                                                      aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">联系电话</label>
                            <input name="phone" class="ui-input" type="text" placeholder="请填写联系电话" value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">邮编</label>
                            <input name="postcode" class="ui-input" type="text" placeholder="请填写邮编" value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset id="specialty" class="hidden">
                        <div class="ui-form-item">
                            <label class="ui-label">企业名称</label><span>上海激想体育文化股份有限公司</span>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">发票金额</label> <span>¥ 2400</span>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label"> 纳税人识别号</label>
                            <input name="usernameId" class="ui-input" type="text" placeholder="请填写纳税人识别号" value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">地址</label>
                            <input name="enterpriseAddress" class="ui-input" type="text" placeholder="请填写注册地址"
                                   value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">电话</label>
                            <input name="specialtyTel" class="ui-input" type="text" placeholder="请填写注册电话" value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">开户行</label>
                            <input name="bankId" class="ui-input" type="text" placeholder="请填写开户行" value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">账号</label>
                            <input name="accountId" class="ui-input" type="text" placeholder="请填写账号" value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">收货人姓名</label>
                            <input name="specialtyUsername" class="ui-input" type="text" placeholder="请填写收货人姓名" value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">收货地址</label>
                            <textarea placeholder="请填写收货地址" name="specialtyAddress" cols="50" rows="4"></textarea>
                            <div class="ui-form-explain-not-input"><i class="fa fa-times-circle ui-form-icon"
                                                                      aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">联系电话</label>
                            <input name="specialtyPhone" class="ui-input" type="text" placeholder="请填写收货人电话" value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label class="ui-label">邮编</label>
                            <input name="specialtyPostcode" class="ui-input" type="text" placeholder="请填写邮编" value=""
                                   autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i><span></span>
                            </div>
                        </div>
                    </fieldset>
                    <div class="ui-form-item fn-pt14">
                        <div class="ui-button ui-button-morange">
                            <input id="J-mobile-submit" type="submit" value="下一步" class="ui-button-text">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-inner">
        <div class="footer-content">
            沪ICP备15052275号-2
        </div>
    </div>
</div>

<!--[if !IE]> -->
<script src="../../assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="../../assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script src="../../assets/js/jquery.validate.min.js"></script>
<script src="../../assets/js/jquery-ui.min.js"></script>
<!--avatar upload-->
<script src="../../assets/js/cropbox.js"></script>
</body>
<script type="text/javascript">
    $(function () {
        //切换方式
        $("input[name='invoice-type']").change(function () {
            var id = $(this).attr('id');
            $(id).removeClass("hidden");
            $(id).siblings('fieldset').addClass("hidden");
        });
//表单验证
        $("#invoiceForm").validate({
            /*onkeyup: function (element, event) {
                //去除左侧空格
                var value = this.elementValue(element).replace(/^\s+/g, "");
                $(element).val(value);
            },*/
            onfocusout: function (element, event) {
                var value = this.elementValue(element).replace(/\s|\xA0/g,"");
                $(element).val(value);
            },
            errorPlacement: function (error, element) {
                error.replaceAll(element.next().find("span"));
            },
            rules: {
                username: {
                    required: true
                },
                address: {
                    required: true
                },
                phone: {
                    required: true
                },
                postcode: {
                    required: true
                },
                usernameId: {
                    required: true
                },
                enterpriseAddress: {
                    required: true
                },
                specialtyTel: {
                    required: true
                },
                bankId: {
                    required: true
                },
                accountId: {
                    required: true
                },
                specialtyUsername: {
                    required: true
                },
                specialtyAddress: {
                    required: true
                },
                specialtyPhone: {
                    required: true
                },
                specialtyPostcode: {
                    required: true
                }

            },
            messages: {
                username: {
                    required: "请输入姓名"
                },
                address: {
                    required: "请输入收货地址"
                },
                phone: {
                    required: "请输入联系电话"
                },
                postcode: {
                    required: "请输入邮编"
                },
                usernameId: {
                    required: "请输入纳税人识别号"
                },
                enterpriseAddress: {
                    required: "请输入注册地址"
                },
                specialtyTel: {
                    required: "请输入注册电话"
                },
                bankId: {
                    required: "请输入开户行"
                },
                accountId: {
                    required: "请输入账号"
                },
                specialtyUsername: {
                    required: "请输入收货人姓名"
                },
                specialtyAddress: {
                    required: "请输入收货人地址"
                },
                specialtyPhone: {
                    required: "请输入收货人电话"
                },
                specialtyPostcode: {
                    required: "请输入邮编"
                }


            },
            highlight: function (e) {
                $(e).closest('.ui-form-item').addClass('ui-form-item-error');
            },
            success: function (e) {
                $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
            },
            submitHandler: function (form) {
                window.location = './payment-confirm.html'
            },
            invalidHandler: function (form) {
            }
        });


    })
</script>

</html>